<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="common.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>轮播图管理</title>
    <style>
        body {
            overflow: hidden;
        }
        .container-fluid {
            overflow-y: scroll;
            height: 100vh;
        }
    </style>
    <script>
        $(document).ready(function() {
            loadCarousels();
        });

        function loadCarousels() {
            $.ajax({
                type: 'GET',
                url: '${pageContext.request.contextPath}/carousel',
                data: {
                    operation: 'getAllCarousels'
                },
                dataType: 'json',
                success: function(response) {
                    $('#carouselTableBody').empty();

                    $.each(response.data, function(index, carousel) {
                        $('#carouselTableBody').append(
                            '<tr>' +
                            '<td>' + carousel.carouselId + '</td>' +
                            '<td>' + carousel.title + '</td>' +
                            '<td>' + carousel.description + '</td>' +
                            '<td><img src="' + carousel.imageUrl + '" alt="图片" class="img-thumbnail" width="50" height="50"></td>' +
                            '<td>' +
                            '<button onclick="editCarousel(this)" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editCarouselModal">编辑</button> ' +
                            '<button onclick="deleteCarousel(' + carousel.carouselId + ')" class="btn btn-danger btn-sm">删除</button>' +
                            '</td>' +
                            '</tr>'
                        );
                    });
                },
                error: function(xhr, status, error) {
                    console.error('加载轮播图数据出错:', error);
                }
            });
        }

        function editCarousel(row) {
            var $row = $(row).closest('tr');
            var carouselId = $row.find('td:eq(0)').text();
            var title = $row.find('td:eq(1)').text();
            var description = $row.find('td:eq(2)').text();
            var imageUrl = $row.find('td:eq(3) img').attr('src');

            $('#editCarouselId').val(carouselId);
            $('#editTitle').val(title);
            $('#editDescription').val(description);
            $('#editImage').attr('src', imageUrl);
            $('#editImageUrl').val(imageUrl);

            $('#editCarouselModal').modal('show');
        }

        function uploadImage(fileInput) {
            var formData = new FormData();
            formData.append('file', fileInput.files[0]);

            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/file/upload',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    $('#editImage').attr('src', response);
                    $('#editImageUrl').val(response);
                },
                error: function(xhr, status, error) {
                    console.error('上传图片出错:', error);
                }
            });
        }

        function saveCarousel() {
            var carouselId = $('#editCarouselId').val();
            var title = $('#editTitle').val();
            var description = $('#editDescription').val();
            var imageUrl = $('#editImageUrl').val();

            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/carousel',
                data: {
                    operation: carouselId ? 'updateCarousel' : 'insertCarousel',
                    carouselId: carouselId,
                    title: title,
                    description: description,
                    imageUrl: imageUrl
                },
                dataType: 'json',
                success: function(response) {
                    $('#editCarouselModal').modal('hide');
                    loadCarousels();
                },
                error: function(xhr, status, error) {
                    console.error('保存轮播图出错:', error);
                }
            });
        }

        function deleteCarousel(carouselId) {
            if (confirm('确定要删除该轮播图吗？')) {
                $.ajax({
                    type: 'POST',
                    url: '${pageContext.request.contextPath}/carousel',
                    data: {
                        operation: 'deleteCarousel',
                        carouselId: carouselId
                    },
                    dataType: 'json',
                    success: function(response) {
                        loadCarousels();
                    },
                    error: function(xhr, status, error) {
                        console.error('删除轮播图出错:', error);
                    }
                });
            }
        }
    </script>
</head>
<body>
<div class="container-fluid mt-4">
    <button class="btn btn-success mb-3" data-toggle="modal" data-target="#editCarouselModal">新增轮播图</button>

    <!-- 轮播图表格 -->
    <table id="carouselTable" class="table table-bordered table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>标题</th>
            <th>描述</th>
            <th>图片</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="carouselTableBody">
        <!-- 轮播图数据将会动态填充在这里 -->
        </tbody>
    </table>
</div>

<!-- 编辑轮播图的模态框 -->
<div class="modal fade" id="editCarouselModal" tabindex="-1" role="dialog" aria-labelledby="editCarouselModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editCarouselModalLabel">编辑轮播图</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editCarouselForm">
                    <input type="hidden" id="editCarouselId" name="carouselId">
                    <div class="form-group">
                        <label for="editTitle">标题</label>
                        <input type="text" class="form-control" id="editTitle" name="title">
                    </div>
                    <div class="form-group">
                        <label for="editDescription">描述</label>
                        <input type="text" class="form-control" id="editDescription" name="description">
                    </div>
                    <div class="form-group">
                        <label for="editImageFile">图片</label>
                        <input type="file" class="form-control-file" id="editImageFile" name="image" onchange="uploadImage(this)">
                        <img id="editImage" class="img-thumbnail mt-2" width="100" height="100" src="#" alt="图片预览">
                        <input type="hidden" id="editImageUrl" name="imageUrl">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveCarousel()">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
